<template>
	<skeleton v-if="!isLoading"></skeleton>
	<view v-else class="content">
		<!-- <image src="../../static/image/communtiy/advert1.png" style="width: 717rpx;height: 192rpx;" @click="toShopping()"></image> -->
		<!-- 新闻资讯  区域 -->
		<view class="newsInfoView">
			<view class="signInViewTitle">
				<view class="signInViewTitleL">
					<view class="line"></view>
					<text>新闻资讯</text>
				</view>
				<text class="more" @click="newsMore()">更多</text>
			</view>
			<!-- 新闻 首页列表 3条 -->
			<view class="newsItem" v-for="(item, index) in newsList" :key="index" @click="toNewsDetail(index)">
				<image :src="item.image" style="width: 150rpx;height: 122rpx;margin-left: 39rpx;"></image>
				<view class="newsItem_R">
					<text v-if="item.title.length < 25" class="newsItem_Des">{{ item.title }}</text>
					<text v-else class="newsItem_Des">{{ item.title.slice(0, 22) + '...' }}</text>
					<text class="newsItem_Date">{{ item.publishDate.slice(0, 10) }}</text>
				</view>
			</view>
		</view>
		<!-- 健康动态区域 healthy dynamic-->
		<view class="healthyDynamicView">
			<view class="signInViewTitle">
				<view class="signInViewTitleL">
					<view class="line"></view>
					<text>健康动态</text>
				</view>
			</view>
			<!-- 健康动态 正文区域  for循环-->
			<view class="healthyDynamicContent" v-for="(item, index) in HealthyDynamic" :key="index" @click="toHealthyDynamic(index)">
				<view class="healthyDynamicHead">
					<text>{{ item.title }}</text>
				</view>
				<!-- 文章 article -->
				<view style="margin-left: 47rpx;margin-top: 38rpx;">
					<text v-if="item.description.length > 50" class="healthyDynamic_article">{{ item.description.slice(0, 50) }}</text>
					<text v-else class="healthyDynamic_article">{{ item.description }}</text>
					<text class="LookDetailText">查看详情</text>
				</view>
				<!-- 图片区域 -->
				<view style="margin-top: 31rpx;margin-left: 55rpx;">
					<uni-grid :column="3" :showBorder="false" :highlight="false" :square="false">
						<uni-grid-item v-for="(item1, index1) in ImgList[index]" :key="index1">
							<image :src="item1" style="width: 192rpx;height: 192rpx;margin-top: 10rpx;"></image>
						</uni-grid-item>
					</uni-grid>
				</view>
				<!-- 文章发布时间 -->
				<view class="DynamicDate">
					<text>{{ item.publishTime }}</text>
				</view>
				<!-- 分割线 -->
				<view v-if="HealthyDynamic.length - 1 != index" class="partingLine"></view>
			</view>
		</view>
	</view>
</template>

<script>
import * as api from '@/api/login';
import uitl from '../../utils/utils.js';
import skeleton from '../../components/skeleton/skeleton_square.vue'
export default {
	components:{
		skeleton
	},
	data() {
		return {
			userId: '',
			isLoading: false,
			isSignIn: true, //是否可以签到
			signInDay: 0, //签到天数
			// 新闻数组
			newsList: [],
			// 健康动态 文章列表
			HealthyDynamic: [],
			ImgList: [],
			innerAudioContext: null,
			domicLength: 0, //健康动态长度
		};
	},
	onLoad() {
		console.log('onload...');
		let userId = this.$store.state.userInfo.currentUser.userId;
		this.getMainDetail();
		this.getContent(0, 4); //资讯
		this.getContentDetails(0, 3); //动态
	},
	// 页面触底事件监听
	onReachBottom() {
		console.log('onReachBottom');
		this.domicLength+=5;
		this.getContentDetails(0, this.domicLength);
		// this.getNewsInfo(this.currentIndex, this.moveLength);
	},
	methods: {
		// 获取签到信息
		getMainDetail() {
			let that = this;
			let data = {
				userId: that.$store.state.userInfo.currentUser.userId,
				action: 'getState'
			};
			api.userTask(data)
				.then(function(res) {
					// console.log(res.data);
					if (res.data.success) {
						that.isLoading = true
						that.isSignIn = res.data.data.userSignIn.canSignIn;
						that.signInDay = res.data.data.userSignIn.userSignRecord.length;
					}
				})
				.catch(function(error) {
					console.log('getuserTask fail', error);
				});
		},
		// 提交签到
		SignInDetail(doll) {
			let that = this;
			let data = {
				userId: that.$store.state.userInfo.currentUser.userId,
				action: 'userDailySignIn',
				params: doll
			};
			api.userDailySignIn(data)
				.then(function(res) {
					console.log(res);
					if (res.data.code == 2000) {
						uni.$emit('updatePurseInfo', {});
						uni.showToast({
							title: '签到成功!',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '签到失败!',
							icon: 'loading'
						});
					}
				})
				.catch(function(error) {
					console.log('userDailySignIn fail', error);
				});
		},
		/*  新闻资讯*/
		getContent(startWith, moveLength) {
			let that = this;
			let data = {
				userId: that.$store.state.userInfo.currentUser.userId,
				action: 'getContent',
				params: {
					channelName: '新闻资讯',
					startWith: startWith,
					moveLength: moveLength
				}
			};
			// console.log(data);
			api.getContent(data)
				.then(function(res) {
					// console.log('getContent success',res);
					if (res.data.code == 2000) {
						that.newsList = res.data.data.Content;
					}
				})
				.catch(function(error) {
					console.log('getContent fail', error);
				});
		},
		// 健康动态 getTexture
		getContentDetails(startWith, moveLength) {
			let that = this;
			let data = {
				userId: that.$store.state.userInfo.currentUser.userId,
				action: 'getContent',
				params: {
					channelName: '健康动态',
					startWith: startWith,
					moveLength: moveLength
				}
			};
			api.getContent(data)
				.then(function(res) {
					console.log('getContentDetails success', res);
					if (res.data.code == 2000) {
						if(res.data.data.Content.length <= that.HealthyDynamic.length) {
							that.$toast('没有数据了')
							return;
						}
						that.ImgList = new Array(moveLength);
						that.HealthyDynamic = res.data.data.Content;
						that.domicLength = res.data.data.Content.length;
						// 将html中的图片提取出来
						res.data.data.Content.forEach((item, index) => {
							that.getHtml(item.accessUrl, index);
						});
					}
				})
				.catch(function(error) {
					console.log('getContentDetails fail', error);
				});
		},
		getHtml(url, index) {
			let that = this;
			uni.request({
				url: url,
				method: 'GET',
				success: res => {
					// 在此处将image标签的src提取出来
					let imgsrc = uitl.getImgSrc(res.data);
					that.ImgList.splice(index, 1, imgsrc);
					// console.log(that.ImgList);
				},
				fail: res => {
					console.log(res);
				}
			});
		},
		//跳转到商城
		toShopping() {
			uni.switchTab({
				url:'/pages/shopMall/shopMall'
			})
		},
		//新闻资讯的更多
		newsMore() {
			uni.navigateTo({
				url: 'newsInfo/newsInfo'
			});
		},
		// 查看新闻资讯具体文章
		toNewsDetail(index) {
			let that = this;
			uni.navigateTo({
				url: 'contentDetail/contentDetail?url=' + that.newsList[index].accessUrl
			});
		},
		toHealthyDynamic(index) {
			let that = this;
			uni.navigateTo({
				url: 'contentDetail/contentDetail?url=' + that.HealthyDynamic[index].accessUrl
			});
		},
		vibrate() {
			uni.vibrateShort({
				success() {
					console.log('vibrate success');
				}
			});
		},
		//签到...
		SignIn() {
			let addDoll = 0;
			this.vibrate();
			this.signInDay++;
			this.isSignIn = false;
			switch (this.signInDay) {
				case 1:
					addDoll = 1;
					break;
				case 2:
					addDoll = 1;
					break;
				case 3:
					addDoll = 1;
					break;
				case 4:
					addDoll = 2;
					break;
				case 5:
					addDoll = 1;
					break;
				case 6:
					addDoll = 1;
					break;
				case 7:
					addDoll = 3;
					break;
				default:
					addDoll = 0;
					break;
			}
			this.SignInDetail(addDoll);
		},
		alreadySignIn() {
			uni.showToast({
				title: '今日已签到!',
				icon: 'loading'
			});
		}
	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.signInView {
	margin-top: 38rpx;
	width: 700rpx;
	height: 369rpx;
	border-radius: 15px;
	background-color: #ffffff;
}
.signInViewTitle {
	margin-top: 43rpx;
	margin-bottom: 67rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.signInViewTitleL {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.line {
	margin-left: 40rpx;
	width: 8rpx;
	height: 36rpx;
	border-radius: 15px;
	background-color: #0659c7;
}
.signInViewTitleL text {
	margin-left: 19rpx;
	font-size: 40rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #333333;
}
.aiDouView {
	margin-top: 59rpx;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.aiDouItem {
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.signed {
	animation: rotate 0.5s ease;
}
@keyframes rotate {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}
.ML48 {
	margin-left: 48rpx;
}
.MR48 {
	margin-right: 48rpx;
}
.aiDouView image {
	width: 76rpx;
	height: 111rpx;
}
.aiDouView text {
	margin-top: 15rpx;
	font-size: 20rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #ff8e08;
}
/* 新闻资讯 */
.newsInfoView {
	margin-top: 36rpx;
	width: 700rpx;
	height: 840rpx;
	border-radius: 15px;
	background-color: #ffffff;
}
.more {
	margin-right: 38rpx;
	font-size: 36rpx;
	font-family: Source Han Sans SC;
	font-weight: normal;
	color: #b3b3b3;
}
/* 新闻列表 s */
.newsItem {
	margin-top: 50rpx;
	width: 100%;
	height: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.newsItem_R {
	width: 435rpx;
	height: 122rpx;
	margin-left: 32rpx;
	margin-right: 44rpx;
	position: relative;
	/* background-color: #01B09A; */
}
.newsItem_Des {
	font-size: 34rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.newsItem_Date {
	position: absolute;
	right: 0;
	bottom: 1rpx;
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #999999;
}
/* 健康动态区域 */
.healthyDynamicView {
	padding-bottom: 98rpx;
	margin-top: 40rpx;
	margin-bottom: 78rpx;
	width: 700rpx;
	height: auto;
	border-radius: 15px;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.healthyDynamicContent {
	/* margin-top: 17rpx; */
	width: 100%;
	height: 100%;
}
.healthyDynamicHead {
	/* width: 100%; */
	margin-left: 47rpx;
}
.healthyDynamicHead text {
	font-size: 34rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #333333;
}
.healthyDynamicHeadL {
	margin-left: 40rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.healthyDynamicHeadLText {
	margin-left: 26rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}
.healthyDynamicHeadLTextT1 {
	font-size: 34rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #333333;
}
.healthyDynamicHeadLTextT2 {
	font-size: 24rpx;
	font-family: Source Han Sans SC;
	font-weight: normal;
	color: #333333;
}
.healthyDynamicDate {
	margin-right: 40rpx;
	font-size: 28rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #666666;
	align-self: flex-start;
}
.healthyDynamic_article {
	font-size: 34rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #333333;
}
.LookDetailText {
	font-size: 34rpx;
	font-weight: normal;
	color: #0659c7;
}
.DynamicDate {
	margin-left: 57rpx;
	margin-top: 35rpx;
}
.DynamicDate text {
	font-size: 24rpx;
	font-family: Source Han Sans SC;
	font-weight: normal;
	color: #666666;
}
.partingLine {
	margin: 65rpx auto 58rpx;
	width: 600rpx;
	height: 2rpx;
	background-color: #f2f2f2;
}
</style>
